<template>
  <view class="pay" v-if="orderInfo" :style="'background-image:url(' + IMAGES.PAY_BG + ')'">
    <view class="header bg-white">
      <view class="money" v-text="orderInfo.price"></view>
      <view class="time" v-if="time > 60">支付剩余时间:{{ time | time2str(3) }}分钟{{ time | time2str(4) }}秒</view>
      <view class="time" v-else>支付剩余时间:{{ time | time2str(4) }}秒</view>
    </view>
    <scroll-view scroll-y :style="styles">
      <view class="cu-list menu text-left">
        <view class="cu-item" v-for="(item, index) in pays" :key="index" @tap="onClickItem(index)">
          <label class="flex justify-between align-center flex-sub">
            <view class="flex-sub">
              <view class="pay-logo"><image :src="item.image" mode="widthFix"></image></view>
              <view class="pay-title">{{ item.title }}</view>
            </view>
            <view class="check" :class="{ 'cuIcon-check': current === index }"></view>
          </label>
        </view>
      </view>
    </scroll-view>
    <view class="pay-btn">
      <form @submit="onClickPay"><button form-type="submit" type="primary">确认支付</button></form>
    </view>
  </view>
</template>

<script>
let params,
  timer = null;
import lyNav from "@/components/nav";
import { IMAGES } from "@/config/resources";
import uniApp from "@/utils/uni-app";
export default {
  components: {
    lyNav
  },
  data() {
    return {
      current: 0,
      time: 0, // 订单有效期剩余时间
      orderInfo: null
    };
  },
  onLoad(options) {
    this.orderInfo = options;
    this.time = options.timeout;
    timer = setInterval(() => {
      this.time--;
      if (this.time <= 0) {
        clearInterval(timer);
        uniApp.alert("订单已过期", function() {
          uni.navigateBack();
        });
      }
    }, 1000);
  },
  computed: {
    IMAGES: () => IMAGES,
    pays() {
      let pays = [];
      // #ifndef MP-WEIXIN
      pays.push({ id: 1, name: "alipay", image: "/static/images/pay/alipay.png", title: "支付宝支付" });
      // #endif
      // #ifndef MP-ALIPAY
      pays.push({ id: 2, name: "wxpay", image: "/static/images/pay/wxpay.png", title: "微信支付" });
      // #endif
      // #ifdef APP-PLUS || H5
      // if (uni.getSystemInfoSync().platform == "ios") {
      //   this.pays.push({ id: 3, name: "appleiap", image: "/static/images/pay/appleiap.png", title: "苹果Apple支付" });
      // }
      // #endif
      return pays;
    },
    styles() {
      let h = this.CustomBar + uni.upx2px(280 + 130 + 40);
      return `height: calc(100% - ${h}px)`;
    }
  },
  methods: {
    onClickItem(index) {
      this.current = index;
    },
    radioChange(e) {
      this.current = e.detail.value;
    },
    onClickPay({ detail }) {
      this.$api.pay
        .getPayInfo(Number(this.orderInfo.id), this.pays[this.current].id)
        .then(_ => {
          // #ifndef H5
          uni.requestPayment({
            provider: this.pays[this.current].name,
            orderInfo: _.data.data,
            success: res => {
              uni.showLoading({
                mask: true,
                title: "检测支付结果..."
              });
              console.warn(".........", res);
              // 支付成功,查询订单状态
              this.$api.good
                .getOrderResult(this.orderInfo.id)
                .then(_ => {
                  console.warn("....1", _);
                  uni.hideLoading();
                  uniApp.alert(_.data.msg || "支付成功", () => {
                    uni.navigateBack();
                  });
                })
                .catch(e => {
                  console.warn("....2", e);
                  uni.hideLoading();
                  uniApp.alert("检测支付失败,请与客服人员联系!");
                });
            },
            fail: err => {
              uniApp.alert("支付未完成,请重新下单!", () => {
                uni.navigateBack();
              });
            }
          });
          // #endif
          // #ifdef H5
          uniApp.alert("敬请期待");
          // #endif
        })
        .catch(e => {
          uniApp.alert("支付失败,请重新下单!", () => {
            uni.navigateBack();
          });
        });
    }
  },
  onUnload() {
    console.warn("卸载页面");
    clearInterval(timer);
  }
};
</script>

<style lang="scss" scoped>
@keyframes move {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0);
  }
}

.pay {
  padding-top: var(--status-bar-height);
  overflow: hidden;
  background-size: 100%;
  background-repeat: no-repeat;
  .header {
    border-radius: 16upx;
    width: 90%;
    margin: 0 auto;
    margin-top: 120upx;
    padding-top: 50upx;
    text-align: center;
    .money {
      font-size: 60upx;
      color: #000000;
      line-height: 90upx;
      height: 90upx;
      position: relative;
      &:before {
        content: "¥ ";
        font-size: 40upx;
      }
    }
    .time {
      color: #989898;
      font-size: 36upx;
      line-height: 90upx;
      height: 90upx;
    }
  }
  scroll-view {
    background: #ffffff;
    width: 90%;
    margin: 20upx auto;
    border-radius: 16upx;
    overflow: hidden;
  }
  .flex-sub {
    display: flex;
    align-items: center;
    .pay-logo {
      min-width: 60upx;
      min-width: 60upx;
      height: 60upx;
      margin: 0 20upx;
      display: flex;
      align-items: center;
      justify-content: center;
      image {
        width: 100%;
        // height: 100%;
      }
    }
    .check {
      border-radius: 100%;
      height: 44upx;
      width: 44upx;
      border: 1px solid #cccccc;
    }
    .cuIcon-check {
      border: none;
      background-color: #fec108;
      color: #000000;
      line-height: 44upx;
      text-align: center;
      font-weight: bold;
      font-size: 30upx;
    }
  }
  .pay-btn {
    margin: 20upx;
    button {
      height: 90upx;
      width: 90%;
      margin: 20upx auto;
      background-color: #fec108;
      color: #000000;
      border-radius: 10upx;
      border: none;
      font-size: 32upx;
      line-height: 90upx;
      box-shadow: 0 4upx 16upx 0 #cccccc;
      &:active {
        transform: scale(1.1);
      }
      &:before,
      &:after {
        border: none;
      }
    }
  }
}
.cu-list.menu > .cu-item:last-child:after {
  border-bottom: 1px solid #ddd;
}
</style>
